<template>
	<view class="card-items">
		<view class="head" v-show='isShow'>
			<span @click='handleTitle(index)' :class="noIndex == index ? '.title-active':''" v-for='(item,index) in titleData' :key='index'>{{ item }}</span>
		</view>
		<scroll-view class="scroll-y" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll">
			<view class="content">
				<view class="img-box">
					<swiper class='swiper' indicator-dots autoplay indicator-active-color='#F0FFFF'>
						<swiper-item @click='previewImg(item,allData.imgList)' v-for='(item, index) in allData.imgList' :key='index'>
							<image class='img' :src='item'></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="desc">
					<p>【{{ allData.name }}】</p>
					<p>
						<span>￥{{ allData.price }}</span>
						<span>￥{{ allData.price }}</span>
						<span>优惠</span>
					</p>
					<p>
						<span>销量{{ allData.sellNum }}</span>
						<span>收藏{{ allData.collect }}人</span>
						<span>24小时发货</span>
					</p>
					<p>
						<span>退货补运费✔</span>
						<span>全国包邮✔</span>
						<span>7天无理由退货✔</span>
					</p>
				</view>
				<view class="shop">
					<view class='top'>
						<image class='img' src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3384913163,1256852657&fm=26&gp=0.jpg"></image>
						<span>大地智慧订餐</span>
					</view>
					<view class='content'>
						<view class='left'>
							<p>
								<span>58.0万</span><br>
								<span>总销量</span>
							</p>
							<p>
								<span>102</span><br>
								<span>全部宝贝</span>
							</p>
						</view>
						<view class='right'>
							<p>
								<span>宝贝质量</span><span style='color: green'>5.00</span><span style='color: white;background-color: green'>高</span>
							</p>
							<p>
								<span>物流速度</span><span style='color: red'>3.50</span><span style='color: white;background-color: red'>中</span>
							</p>
							<p>
								<span>宝贝评价</span><span style='color: green'>4.50</span><span style='color: white;background-color: green'>高</span>
							</p>
						</view>
					</view>
					<view class='gohome'>
						<span><navigator url="../pages/tab1/tab1" open-type="switchTab">进店逛逛</navigator></span>
						<span><navigator url="../pages/tab2/tab2" open-type="switchTab">全部宝贝</navigator></span>
					</view>
				</view>
				<view class="comment">
					<view class='top'><span>宝贝评价</span><span>查看全部></span></view>
					<ul class='center'>
						<li class="row">
							<p>
								<image class='img' src="https://i04piccdn.sogoucdn.com/cb7742eae755a88a"></image>
								<span>李**   2天前</span>
							</p>
							<p>没有坏果，吃起来特别特别的甜，这个价格很划算了，果子大又甜，多汁水，吃起来也营养</p>
							<p>
								<image class='img' @click='previewImg(item,allData.imgList)' v-for='item in allData.imgList' :key='item' :src="item"></image>
							</p>
						</li>
					</ul>
				</view>
				<love-heart>
					<span slot='title'>更多好货</span>
				</love-heart>
				<view class="more" style='width: 95%'>
					<card-view></card-view>
				</view>
				<view class="empty" style='height: 8vh'></view>
			</view>
		</scroll-view>
	  <view class='bottomNav'>
			<ul class="left">
				<li>
					<image class='img' src="../static/tabs/home2.png"></image>
					<navigator class='btn' url="../pages/tab1/tab1" open-type="switchTab">店铺</navigator>
				</li>
				<li>
					<image class='img' src="../static/detail/service.png"></image>
					<button class='btn' open-type='contact'>客服</button>
				</li>
				<li @click='addCollect'>
					<image class='img' v-if='allData.collectStatus == false ? true:false' src="../static/detail/collect.png"></image>
					<image class='img' v-else src="../static/order/collection.png"></image>
					<span class='btn'>收藏</span>
				</li>
			</ul>
			<view class="right">
				<p @click='addCart'>加入购物车</p>
				<p @click='goPay'>领劵购买</p>
			</view>
		</view>
	</view>
</template>

<script>
	import loveHeart from '@/pages/tab3/view/love_heart.vue'
	import cardView from '@/pages/tab1/view/card.vue'
	export default{
		components:{
			loveHeart,
			cardView
		},
		data(){
			return{
				scrollTop: 0,
				allData: [],
				titleData: ['商品','参数','评论','推荐'],
				noIndex: 0,
				isShow: false
			}
		},
		onLoad() {
		  const eventChannel = this.getOpenerEventChannel()
		  eventChannel.on('sendDetail', res=> {
		    this.allData = res.data
		  })
		},
		methods:{
			handleTitle(index){
				this.noIndex = index
				if(index == 0){
					this.scrollTop = 0
				}else if(index == 1){
					this.scrollTop = 250
				}else if(index == 2){
					this.scrollTop = 600
				}else{
					this.scrollTop = 830
				}
			},
			scroll(e){
				e.detail.scrollTop > 100 ? this.isShow = true:this.isShow = false
			},
			// 收藏
			addCollect(){
				this.allData.collectStatus = !this.allData.collectStatus;
				this.$store.commit('addCollect', this.allData)
				if(this.allData.collectStatus == true){
					uni.showToast({
						title: '收藏成功'
					})
				}else{
					uni.showToast({
						title: '取消收藏'
					})
				}
			},
			// 图片预览
			previewImg(item,itemArr){
				uni.previewImage({
					item,
					urls: itemArr,
					loop: true
				})
			},
			// 加入购物车
			addCart(){
				this.$store.commit('addCartItem', this.allData)
			},
			// 去支付详情页商品
			goPay(){
				let that = this
				uni.navigateTo({
					url: '/pages/tab3/view/pay?keyword=detail',
					success(res) {
						res.eventChannel.emit('sendDetail', { data: that.allData })
					}
				})
			},
		}
	}
</script>

<style lang='scss'>
	.title-active{
		color: red;
		border-bottom: 6rpx solid red;
	}
	.bottomNav{
		width: 100%;
		height: 8vh;
		position: fixed;
		left: 0;
		bottom: 0;
		border-top: 1rpx solid rgba(142,164,198,.3);
		background-color: white;
		display: flex;
		.left,.right{
			width: 50%;
			height: 100%;
		}
		.left{
			display: flex;
			justify-content: space-evenly;
			background-color: rgba(176,192,222,.1);
			li{
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;
				.img{
					width: 40rpx;
					height: 40rpx;
				}
				button{
					font-size: 28rpx;
					background-color: rgba(0,0,0,0)
				}
				.btn{
					height: 17px;
					line-height: 17px;
				}
				button::after { border: none }
			}
		}
		.right{
			display: flex;
			p{
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
			}
			p:first-child{
				background-color: gold;
			}
			p:last-child{
				background-color: #DD2222;
			}
		}
	}
	.head{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: white;
	  display: flex;
		justify-content: space-evenly;
		color: #3F536E;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		background-color: white;
		border-bottom: 1rpx solid rgba(142,164,198,.3)
	}
	.card-items{
		width: 100%;
		.scroll-y{
			width: 100%;
			height: 100vh;
			.content{
				width: 100%;
				background-image: linear-gradient(to right bottom,#FFFFFF,#F0F8FF);
				.img-box{
					width: 100%;
					height: 600rpx;
					.swiper{
						width: 100%;
						height: 100%;
						.img{
							width: 100%;
							height: 100%;
						}
					}
				}
				.desc{
					width: 100%;
					height: 240rpx;
					p{
						width: 95%;
						margin-left: 2.5%;
						height: 80rpx;
						line-height: 80rpx;
					}
					p:first-child{
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					p:nth-child(2){
						span:first-child{
							color: red;
							font-size: 35rpx;
						}
						span:nth-child(2){
							color: #999999;
							text-decoration: line-through;
							font-size: 26rpx;
						}
						span:last-child{
							background-color: red;
							color: white;
							border-radius: 20rpx;
							font-size: 28rpx;
							padding: 5rpx 10rpx;
						}
					}
					p:nth-child(n+3){
						display: flex;
						justify-content: space-between;
						color: #999999;
						font-size: 28rpx;
					}
					p:last-child{
						color: rgba(0,0,0,.8);
						border-top: 1rpx solid rgba(142,164,198,.2);
					}
				}
				.shop{
					width: 100%;
					height: 420rpx;
					margin-top: 80rpx;
					border-top: 15rpx solid rgba(142,164,198,.2);
					border-bottom: 15rpx solid rgba(142,164,198,.2);
					.top{
						width: 100%;
						height: 150rpx;
						display: flex;
						align-items: center;
						.img{
							width: 100rpx;
							height: 100rpx;
							margin-left: 30rpx;
							border-radius: 50%;
						}
						span{
							margin-left: 20rpx;
							font-size: 35rpx;
						}
					}
					.content{
						width: 100%;
						height: 150rpx;
						display: flex;
						color: #555555;
						font-size: 28rpx;
						.left,.right{
							width: 50%;
						}
						.left{
							display: flex;
							align-items: center;
							justify-content: space-around;
							border-right: 2rpx solid #F1F1F1;
							p{
								text-align: center;
								font-size: 35rpx;
							}
						}
						.right{
							p{
								display: flex;
								align-items: center;
								justify-content: space-evenly;
								height: 50rpx;
							}
						}
					}
					.gohome{
						width: 60%;
						height: 120rpx;
						margin-left: 20%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						background-image: linear-gradient(to right top,#FFFFFF,#F0F8FF);
						span{
							width: 200rpx;
							height: 60rpx;
							font-size: 30rpx;
							border-radius: 30rpx;
							text-align: center;
							line-height: 60rpx;
							letter-spacing: 5rpx;
							color: rgba(216,30,6,1);
							border: 1rpx solid rgba(216,30,6,.5);
							background-color: rgba(216,30,6,.1);
						}
					}
				}
				.comment{
					width: 100%;
					box-sizing: border-box;
					padding: 2.5% 20rpx;
					border-bottom: 15rpx solid rgba(142,164,198,.2);
					.top{
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						display: flex;
						justify-content: space-between;
						font-size: 35rpx;
						span:last-child{
							color: red;
						}
					}
					.center{
						li{
							p:first-child{
								width: 100%;
								height: 100rpx;
								display: flex;
								align-items: center;
								.img{
									width: 60rpx;
									height: 60rpx;
									border-radius: 50%;
								}
								span{
									color: #808080;
									margin-left: 30rpx;
								}
							}
							p:nth-child(2){
								width: 100%;
								height: 90rpx;
								line-height: 45rpx;
								font-size: 28rpx;
								color: #999999;;
							}
							p:last-child{
								width: 100%;
								height: 150rpx;
								display: flex;
								align-items: center;
								.img{
									width: 180rpx;
									height: 130rpx;
								}
								.img:nth-child(n+2){
									margin-left: 15rpx;
								}
								.img:first-child{
									border-top-left-radius: 15rpx;
									border-bottom-left-radius: 15rpx;
								}
								.img:last-child{
									border-top-right-radius: 15rpx;
									border-bottom-right-radius: 15rpx;
								}
							}
						}	
					}
				}
			}
		}
	}
</style>
